<script setup lang="ts">
interface ButtonAction {
  name: string
  type?: 'primary' | 'info' | 'success' | 'warning' | 'danger'
  handle: () => void
}

defineProps<{
  icon?: string
  title?: string
  content: string
  closeable: boolean
  buttons?: ButtonAction[]
}>()

const emit = defineEmits(['hide'])

function onBtnClicked(btn: ButtonAction) {
  emit('hide')
  btn.handle()
}

function btnClass(type?: string): string {
  return type ? `button is-light is-${type}` : 'button is-white'
}
</script>
<template>
  <div class="notify" :class="{ 'notify-with-icon': icon != null }">
    <div v-if="icon" class="notify-icon">
      <i :class="icon" />
    </div>
    <button class="delete is-small" v-if="closeable" @click="$emit('hide')" />
    <div class="notify-main">
      <div v-if="title" class="notify-header">{{ title }}</div>
      <div class="notify-content">{{ content }}</div>
      <div v-if="buttons" class="notify-footer buttons">
        <button
          v-for="(btn, idx) in buttons"
          :key="idx"
          @click="onBtnClicked(btn)"
          :class="btnClass(btn.type)"
        >
          {{ btn.name }}
        </button>
      </div>
    </div>
  </div>
</template>
